@deep: ~'>>>';
h1,
h2,
h3,
h4,
h5,
p,
ul {
    margin: 0;
    padding: 0;
}
.page {
    background: #f4f6f9;
    height: 100%;
}

@{deep}.page-content {
    background: #f4f6f9;
    height: 100%;
}

.search-box {
    background-color: #1990ff;
    position: fixed;
    width: 100%;
    height: 51px;
    z-index: 99;

    @{deep}.searchbar {
        flex: 1;
        font-size: 16px;
        height: 35px;
        border-radius: 35px;
        overflow: hidden;
        margin-left: 16px;
        width: 92%;

        input[type='search'] {
            font-size: 16px;
            padding-left: 50px;
        }
    }
    @{deep}.van-search__action{
        &:active{
            background: transparent;
        }
        .search-bar-btn{
            color: #fff;
            font-size: 16px;
            &.active-state{
                background: transparent;
            }
        }
    }

    > span {
        flex-shrink: 0;
        padding: 10px;
        width: 17px;
        height: 17px;
        background: url('../../assets/img/search.png') no-repeat center / 17px;
    }
}
@{deep}.van-popup{
    height: 100%;
}
.popup-bg {
    width: 100%;

    .btn {
        display: flex;
        justify-content: space-between;
        height: 51px;
    }

    /deep/ .van-checkbox-group {
        height: calc(100% - 51px);
        overflow: auto;
    }

    /deep/.toolbar,
    /deep/.navbar {
        position: fixed;
    }

    /deep/.toolbar {
        .toolbar-inner {
            padding: 16px;
            color: #8995ac;

            .submit-btn {
                border-radius: 24px;
            }
        }
    }

    .cancle {
        padding: 15px 0px 15px 18px;
        font-size: 14px;
        font-weight: 600;
    }

    .confirm {
        padding: 15px 18px 15px 0px;
        font-size: 14px;
        font-weight: 600;
    }

    .popup {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        height: 400px;
        // overflow: auto;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background: #fff;
    }

    .item {
        padding: 0 15px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #f7f8f9;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .selected {
        width: 16px;
        height: 16px;
        background-size: 16px auto;
    }

    .radio-list {
        padding: 10px 0 80px;
        margin-top: 55px;

        @{deep} .van-checkbox {
            align-items: flex-start;
            margin-right: 10px;
            min-width: 24px;
        }
    }
}

.search-list {
    margin: 0 15px;

    @{deep} ul {
        background: none;
    }

    .search-list-item {
        flex: 1;
        border-radius: 4px;
        background: #fff;
        padding: 12px 15px;
        margin-bottom: 10px;
        display: flex;
        align-items: flex-start;
        margin-left: 10px;
        h3{
            display: flex;
            align-items: inherit;
            .tag{
                flex-shrink: 0;
            }
        }
    }

    li {
        font-size: 13px;
        display: flex;
        align-items: center;

        .left-box {
            width: 46px;
            height: 46px;
            margin-right: 12px;
            flex-shrink: 0;
        }
        .sculpture{
            border-radius: 50px;
        }
        .right-box {
            word-break: break-all;
            flex: 1;
            .title-box {
                display: flex;
                justify-content: space-between;
                align-items: center;
                h3 {
                    color: #242424;
                    font-size: 16px;
                    flex: 1;
                }
                .status {
                    font-size: 13px;
                    color: #61677a;
                }
                .status-yellow {
                    color: #ff9f24;
                }
            }
            span {
                flex-shrink: 0;
                &.tag.tag-fill {
                    background: rgba(115, 125, 138, 0.1);
                    color: #61677a;
                    border: none;
                }
                &.tag.tag-yellow {
                    background: #fef7ee;
                    color: #ff9534;
                    border: none;
                }
            }
            p {
                color: #8995ac;
                font-size: 13px;
                margin-top: 10px;
                span {
                    color: #1990ff;
                }
            }
        }
        .total-top {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .code {
                font-weight: 600;
                color: #242424;
                font-size: 14px;
            }
        }

        .total-bottom {
            font-size: 14px;
            font-weight: 400;
            color: #909db6;

            .name-box {
                margin-bottom: 5px;
            }

            .value {
                color: #31415f;
            }
            .value-red {
                color: #fd5050;
            }
        }
    }
}

.prev-btn {
    background: rgba(51, 133, 255, 0.14);
    color: #3385ff;
}
